<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <style>
        #app {
            max-width: 600px;
            margin: 40px auto;
            padding: 30px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        label {
            font-weight: 600;
            color: #2c3e50;
            font-size: 16px;
            margin-bottom: 4px;
        }

        input, select {
            padding: 14px 16px;
            border: 1px solid #dbe0e6;
            border-radius: 10px;
            background-color: #fff;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.03);
        }

        input:focus, select:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        input[type="radio"] {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            cursor: pointer;
        }

        .radio-group {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .avatar-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
        }

        #avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            object-fit: cover;
        }

        #avatar:hover {
            transform: scale(1.03);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        }

        .avatar-label {
            color: #7f8c8d;
            font-size: 14px;
            text-align: center;
        }

        input[type="button"] {
            background: linear-gradient(to right, #3498db, #2c76b8);
            color: white;
            border: none;
            border-radius: 10px;
            padding: 16px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 12px;
            transition: all 0.3s ease;
            letter-spacing: 1px;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }

        input[type="button"]:hover {
            background: linear-gradient(to right, #2c76b8, #246190);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
        }

        input[type="button"]:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3);
        }

        .radio-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 4px 0;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            #app {
                margin: 20px;
                padding: 20px;
            }

            form {
                gap: 20px;
            }

            input, select {
                padding: 12px 14px;
            }

            input[type="button"] {
                padding: 14px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<div id="app">
<form action="/" method="post">
    <!-- 头像区域 -->
    <div class="form-group avatar-container">
        <img
                @click="triggerFileInput"
                id="avatar"
                :src="employee.avatar">
        <input
                type="file"
                ref="fileInput"
                accept="image/*"
                style="display: none;"
                @change="uploadAvatar">
    </div>

    <!-- 姓名 -->
    <div class="form-group">
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model="employee.name" required>
    </div>

    <!-- 年龄 -->
    <div class="form-group">
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model="employee.age" required>
    </div>

    <!-- 性别 -->
    <div class="form-group">
        <label>性别:</label>
        <div class="radio-group">
            <div class="radio-label">
                <input type="radio" id="male" v-model="employee.gender" value="男" checked>
                <label for="male">男</label>
            </div>
            <div class="radio-label">
                <input type="radio" id="female" v-model="employee.gender" value="女">
                <label for="female">女</label>
            </div>
        </div>
    </div>

    <!-- 入职日期 -->
    <div class="form-group">
        <label for="hire_date">入职日期:</label>
        <input type="date" id="hire_date" v-model="employee.hire_date">
    </div>

    <!-- 职位 -->
    <div class="form-group">
        <label for="position">职位:</label>
        <select id="position" v-model="employee.position">
            <option value="产品经理">产品经理</option>
            <option value="人力资源专员">人力资源专员</option>
            <option value="客服主管">客服主管</option>
            <option value="市场部经理">市场部经理</option>
            <option value="测试工程师">测试工程师</option>
            <option value="行政助理">行政助理</option>
            <option value="软件工程师">软件工程师</option>
            <option value="销售总监">销售总监</option>
        </select>
    </div>

    <!-- 提交按钮 -->
    <div class="form-group">
        <input type="button" @click="register" value="提交">
    </div>
</form>
</div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
        file: null,
        employee: {
            avatar: '/avatar/avatar_default.png', // 默认头像
            name: '',
            age: '',
            gender: '男',
            hire_date: new Date().toISOString().split('T')[0],
            position: '软件工程师'
        }
    },
    methods: {
        // 触发文件选择
        triggerFileInput() {
            this.$refs.fileInput.click();
        },
        register() {
            console.log('employee = '+JSON.stringify(this.employee));
            axios.post('/employee/register',
                this.employee, // 自动序列化为 JSON
                {
                    headers: {
                        'Content-Type': 'application/json' // 必须设置
                    }
                }).then(response => {
                alert("注册成功！");
            }).catch(error => {
                alert("注册失败: " + (error.response?.data?.error || error.message));
            });
        },
      uploadAvatar(event) {
        this.file = event.target.files[0];
        if (!this.file) return alert("请选择文件");
        const formData = new FormData();
        formData.append("file", this.file);
        axios.post('/employee/uploadAvatar', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          const url = response.data.url;
          this.employee.avatar = url; // 更新预览为服务器返回的URL（如果需要的话）
          // 这里可以将avatarUrl发送到后端更新用户头像
        }).catch(error => {
          alert("上传失败: " + (error.response?.data?.error || error.message));
        });
      }
    }
  });
</script>
</html>